<template>
  <!-- 我的 -->
  <view class="container">
    <view class="navigationBar">
      <!-- 状态栏 -->
      <view :style="{ height: statusBarHeight + 'px', width: '100%' }" class="navbar-top">

      </view>
      <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: '100%' }">
        <image class="iconB" src="../static/ucenter/backB.png" v-if="selectedIndex=='1-1'||selectedIndex=='1-2'"
          @tap="returnPage()"></image>
        {{title}}
      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex==3">
      <view class="topPart">
        <image class="photo" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/headportrait.png">

        </image>
        <view class="center">
          <view class="line1">
            <view class="name">孙俪</view>
            <view class="status">休息中</view>
            <image class="button" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/button.png">
            </image>
          </view>
          <view class="line2">
            <image class="telIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/tel.png">
            </image>
            <view class="tel">18944260097</view>

          </view>

        </view>
        <view class="right">
          <image class="set" @tap="jumpUrl('/page_cookSide/setting')" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/setUp.png">

          </image>
          <view class="cookStatus">活动厨师
            <image class="attention" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/attention.png">

            </image>
          </view>
        </view>
      </view>
      <view class="centerPart">
        <view class="centerBox">
          <view class="top">
            <view class="left">
              <view class="line1">
                <view class="text">账户余额</view>
                <image class="eye" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/eyeClose.png"></image>
                <image class="eye" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/eyeOn.png"></image>
              </view>
              <view class="line2">5860.00</view>
            </view>
            <view class="right">
              提现
            </view>
          </view>
          <view class="bottom">
            <view class="eachBox">
              <view class="title">总收益（元）</view>
              <view class="num">5824.2</view>
            </view>
            <view class="eachBox">
              <view class="title">今日收益（元）</view>
              <view class="num">300.00</view>
            </view>
            <view class="eachBox">
              <view class="title">昨日收益（元）</view>
              <view class="num">420.00</view>
            </view>

          </view>
        </view>
      </view>
      <view class="bottomPart">
        <view class="bottomBox">
          <view class="iconBox" v-for="(item,index) in iconInfo" @tap="jumpUrl(item.url)">
            <image class="icon" :src="'https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/icon'+(index+1)+'.png'">
            </image>
            <view>{{item.title}}</view>
          </view>


        </view>
      </view>
      <view class="depositPart">
        <view class="depositBox">
          <image class="depositIcon" @tap="showPopup"
            src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/depositIcon.png">
          </image>
          <view class="text1" @tap="showPopup">保证金退还</view>
          <view class="text2" @tap="showPopup">￥200.00</view>
          <image class="attention" @tap="showTip"
            src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/attention.png">

          </image>
          <view class="absoluteBox" v-if="showAbsoluteBox">
            <image class="attention" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/attention.png">

            </image>
            保证金退还，接单权限将被冻结，请谨慎操作！
          </view>
        </view>
      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex==0">
      <view class="topPart0">
        <view class="attention">
          <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/broadcast.png">
          </image>
          <span>审核成功之后自动转换为代理</span>
        </view>
        <!-- 
        <view class="eachMenu">
          <view class="setMenu">
            <image class="setPic" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/headportrait.png"></image>
            <view class="mask">
              <view class="examine">代理审核中...</view>
            </view>
            <view class="labelBox">
              <image class="triangle" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/triangle.png"></image>
              <view class="text">已拒绝</view>
            </view>
          </view>
          <view class="bottom">
            <view class="setInfo">
              <view class="line1">
                <view class="left">
                  <span class="name">2388套餐/10位</span>
                  <span class="person">8-10位</span>
                </view>
                <view class="right">21道菜</view>
              </view>
              <view class="line2">星泰度东南亚风情餐厅是马苏明餐饮管理有限公司旗下的一家以东南亚风情为主打风格的餐厅,泰...</view>
              <view class="line3">
                <view class="left">24人已购</view>
                <view class="right">￥2388<span>起</span></view>
              </view>
            </view>
            <view class="buttons">
              <view class="left">2024-11-15 16:26:32</view>
              <view class="right">
                <view class="delete">删除套餐</view>
                <view class="edit">修改套餐</view>
              </view>
            </view>
          </view>
        </view>
		-->
        <view class="eachMenu" v-for="(item,index) in packageList">
          <view class="setMenu">
            <image class="setPic" :src="item.image"></image>
            <!--
			<view class="mask">
		      <view class="examine">代理审核中...</view>
		    </view>
		    <view class="labelBox">
		      <image class="triangle" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/triangle.png"></image>
		      <view class="text">已拒绝</view>
		    </view>
			-->
          </view>
          <view class="bottom">
            <view class="setInfo">
              <view class="line1">
                <view class="left">
                  <span class="name">{{item.name}}/{{item.people_max}}位</span>
                  <span class="person">{{item.people_min}}-{{item.people_max}}位</span>
                </view>
                <view class="right">{{ getNumbers(item.content) }}道菜</view>
              </view>
              <view class="line2">{{item.desc}}</view>
              <view class="line3">
                <view class="left">{{item.sales}}人已购</view>
                <view class="right">￥{{item.price}}<span>起</span></view>
              </view>
            </view>
            <view class="buttons">
              <view class="left">{{ formatTimestamp(item.create_at)}}</view>
              <view class="right">
                <view class="delete" @click="dialogToggle(item)">删除套餐</view>
                <view class="edit" @click="editMenu(item)">修改套餐</view>
              </view>
            </view>
          </view>
        </view>

        <view class="zhanwei"></view>

        <view class="Operations">
          <image class="addIcon" @tap="showAddBox=!showAddBox"
            src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/addIcon.png">
          </image>

        </view>
        <view class="iconBox" v-if="showAddBox">
          <view class="eachIconbox" @tap="addMenu">
            <image class="addIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/add.png">
            </image>
            <view class="text">固定套餐</view>
          </view>
          <view class="eachIconbox">
            <image class="addIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/refresh.png">
            </image>
            <view class="text">刷新</view>
          </view>
        </view>

      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex==1">
      <view class="topPart1">
        <view class="statics">
          <view class="left">你已累计服务：</view>
          <view class="center">0</view>
          <view class="right">单</view>
        </view>
        <view class="searchBox">
          <uni-easyinput type="text" prefixIcon="search" v-model="searchValue" placeholder="搜索名称或者手机号" />
        </view>
        <view class="eachMenu" v-for="(item,index) in orderListIng">
          <view class="orderNum">订单号：{{item.order_sn}}
            <span v-if="item.shippingstate=='1'">已接单</span>
          </view>

          <view class="orderInfo" @tap="changeItem('1-1')">
            <view class="infoLine">
              <view class="left">服务地址：</view>
              <view class="right">{{item.address}}</view>
            </view>
            <view class="infoLine">
              <view class="left">预约时间：</view>
              <view class="right red">{{item.use_time}}</view>
            </view>
            <view class="infoLine">
              <view class="left">客户备注：</view>
              <view class="right">{{item.user_memo}}</view>
            </view>
            <view class="infoLine">
              <view class="left">增值服务：</view>
              <view class="right">{{getServices(item.services)}}</view>
            </view>
            <view class="infoLine">
              <view class="left">服务内容：</view>
              <view class="right">{{item.sku_info.goods_sku_text}}</view>
            </view>
            <view class="infoLine">
              <view class="left">客户电话：</view>
              <view class="right">{{item.phone}}</view>
            </view>
            <image class="addrIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/addrIcon.png"></image>

          </view>
          <view class="buttons">
            <view class="left">下单时间：{{formatTimestamp(item.create_at)}}</view>
            <view v-if="item.orderstate=='3'" class="right grey">已完工</view>
            <view v-if="item.shippingstate=='2'" class="right yellow">出发/签到</view>
            <view v-if="item.shippingstate=='0'" @tap="openDialog('jieDan',item)" class="right yellow">确认接单</view>
            <view v-if="item.shippingstate=='1'" class="right yellow">接单中...</view>

          </view>


        </view>
        <view class="nodata" v-if="handleOrderList.length==0">
          <image class="noData" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/noData.png">
          </image>
          <view class="text">暂无数据~</view>
        </view>


        <view class="zhanwei"></view>
      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex=='1-1'">
      <view class="topPart1 bgNone">

        <view class="searchBox">
          <uni-easyinput type="text" prefixIcon="search" v-model="searchValue" placeholder="搜索名称或者手机号" />
        </view>
        <view class="topBox">
          <!--
          <view class="row borderB" @tap="changeItem('1-2')">
		  -->
          <view class="row borderB" @tap="changeItem('1-2')">
            <view class="left">客户地址：</view>
            <view class="right">{{orderDetail.address}}</view>
            <image class="addrIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/addrIcon.png"></image>
          </view>
          <view class="row">
            <view class="left">客户电话：</view>
            <view class="right">{{orderDetail.phone}}</view>
            <image class="telIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/login/tel.png">
            </image>
          </view>

        </view>
        <view class="topBox">
          <view class="row borderB">
            <view class="left">订单号：</view>
            <view class="right">{{orderDetail.order_sn}}</view>
            <span class="statusTxt" v-if="orderDetail.shippingstate=='0'">已预约</span>
            <span class="statusTxt" v-if="orderDetail.orderstate=='3'">已完工</span>
            <span class="statusTxt" v-if="orderDetail.shippingstate=='1'">待完工</span>
            <span class="statusTxt" v-if="orderDetail.shippingstate=='2'">待签到</span>
          </view>
          <view class="row ">
            <view class="left">预约时间：</view>
            <view class="right red">{{orderDetail.use_time}}</view>
          </view>
        </view>
        <view class="centerBox">
          <view class="row borderB">
            <view class="left">客户备注：</view>
            <view class="right">{{orderDetail.user_memo}}</view>
          </view>
          <view class="row borderB">
            <view class="left">增值服务：</view>
            <view class="right">{{getServices(orderDetail.services)}}</view>
          </view>
          <view class="row borderB">
            <view class="left">服务内容：</view>
            <view class="right">{{orderDetail.sku_info.goods_sku_text}}</view>
          </view>
          <view class="row">
            <view class="left">客户电话：</view>
            <view class="right">{{orderDetail.phone}}</view>
          </view>
        </view>
        <!--
        <view class="bottomBox">
          <view class="line1 borderB">其他操作</view>
          <view class="line2">
            <view class="type">申请退款</view>
            <view class="type">申请关闭</view>
            <view class="type">再次申请</view>
          </view>
        </view>
		-->

        <view class="button">
          <view v-if="orderDetail.status=='已预约'" class="right yellow">出发</view>
          <view v-if="orderDetail.status=='已完工'" class="right grey">已完工</view>
          <view v-if="orderDetail.status=='待完工'" class="right yellow">结束服务</view>
          <view v-if="orderDetail.status=='待签到'" class="right yellow">到达签到</view>
        </view>


        <view class="nodata" v-if="orderListIng.length==0">
          <image class="noData" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/noData.png">
          </image>
          <view class="text">暂无数据~</view>
        </view>


        <view class="zhanwei"></view>
      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex=='1-2'">
      <view class="topPart2" :style="{ height: screenHeight + 'px' }">

        <view class="mapBox">
          <!-- 地图插件 -->
        </view>
        <view class="addrInfo">
          <view class="line1">全程<span>2.52</span>公里</view>
          <view class="infoLine">
            <image class="timeIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/timeIcon.png">
            </image>
            <view class="key">出发时间：</view>
            <view class="value">11月20日 12:27:33</view>
          </view>
          <view class="infoLine">
            <view class="circle red"></view>
            <view class="key">出发地点：</view>
            <view class="value"> 江苏省苏州市工业园区南施街158号金湖湾9栋402</view>
          </view>
          <view class="infoLine">
            <view class="circle green"></view>
            <view class="key">到达地点：</view>
            <view class="value"> 江苏省苏州市工业园区南施街158启迪克</view>
          </view>
          <view class="button">
            <view class="yellow">确认到达</view>
          </view>
        </view>


      </view>
    </view>
    <view class="contentBox" v-if="selectedIndex==2">
      <view class="topPart1">
        <view class="searchBox">
          <uni-easyinput type="text" prefixIcon="search" v-model="searchValue" placeholder="搜索名称或者手机号" />
        </view>
        <view class="eachMenu" v-for="(item,index) in orderListAll">
          <view class="orderNum">订单号：{{item.order_sn}}

          </view>

          <view class="orderInfo">
            <view class="infoLine">
              <view class="left">服务地址：</view>
              <view class="right">{{item.address}}</view>
            </view>
            <view class="infoLine">
              <view class="left">预约时间：</view>
              <view class="right red">{{item.use_time}}</view>
            </view>
            <view class="infoLine">
              <view class="left">客户备注：</view>
              <view class="right">{{item.user_memo}}</view>
            </view>
            <view class="infoLine">
              <view class="left">增值服务：</view>
              <view class="right">{{getServices(item.services)}}</view>
            </view>
            <view class="infoLine">
              <view class="left">服务内容：</view>
              <view class="right">{{item.sku_info.goods_sku_text}}</view>
            </view>
            <view class="infoLine">
              <view class="left">客户电话：</view>
              <view class="right">{{item.phone}}</view>
            </view>
            <image class="addrIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/addrIcon.png"></image>
          </view>
          <view class="buttons">
            <view class="left">下单时间：{{formatTimestamp(item.create_at)}}</view>
            <view v-if="item.orderstate=='3'" class="right grey">已完工</view>
            <view v-if="item.orderstate=='1'" class="right grey">已取消</view>
            <view v-if="item.orderstate=='0' && item.shippingstate=='1'" class="right yellow">接单中</view>
          </view>

        </view>
        <view class="zhanwei"></view>
      </view>
    </view>

    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialogBank" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="提示" content="保证金退还，将无法接单"
          @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertConfirmOrder" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="提示" content="是否确认接单？"
          @confirm="dialogConfirmOrder" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
    <view class="zhanwei" v-if="selectedIndex!='1-2'"></view>
    <view class="tabBarContainer" v-if="selectedIndex!='1-2'">
      <view v-for="(item,index) in tabBarList" @tap="changeItem( index)" class="barBox">
        <image :src="selectedIndex == index ?item.selectedIconPath:item.iconPath"
          :class=" selectedIndex == index?' iconStyle selectedIconStyle':'iconStyle'"></image>
        <view :class="selectedIndex == index?'text selectedTxt':'text'">{{item.text}}</view>

      </view>
    </view>


    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title=" " content="确认删除？"
          @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();


  export default {
    data() {
      return {
        screenHeight: 0,
        orderList: [{
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '接单中'
        },
        {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '已完工'
        },
        {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '已取消'
        },
        ],
        handleOrderList1: [],
        orderDetail: {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '待签到'
        },
        handleOrderList: [{
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '已接单'
        },
        {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '已完工'
        },
        {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '确认接单'
        },
        {
          orderNumber: '146151513326626',
          addr: '江苏苏州园区阳澄湖',
          time: '2024-08-24 10:00-11:00',
          remark: '蔬菜齐全，特殊调料自带',
          extra: '清洁、代买',
          content: '4-5菜+1汤',
          phone: '18945218522',
          date: '2024-11-12 16:12:26',
          status: '接单中'
        },
        ],
        searchValue: '',
        showAddBox: false,
        title: '我的套餐（厨师端）',
        showAbsoluteBox: false,
        couponInfo: {},// 优惠券信息
        picData: [],
        codeId: '',
        openId: '',
        iconInfo: [
          {
            title: '我的资料',
            url: '/page_cookSide/setting'
          },
          {
            title: '我要提现',
            url: '/page_cookSide/cashOut'
          },
          {
            title: '我的账单',
            url: '/page_cookSide/myBill'
          },
          {
            title: '我的评价',
            url: '/page_cookSide/myEvaluate'
          },
          {
            title: '厨娘须知',
            url: '/page_notice/notice'
          },
          {
            title: '服务时间',
            url: '/page_cookTime/cookTime'
          },
        ],
        statusBarHeight: 20,
        navBarHeight: 45,
        windowWidth: 375,
        hasLogin: false,
        selectedIndex: 1,
        tabBarList: [
          {
            "iconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/set_nor.png",
            "selectedIconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/set.png",
            "text": "我的套餐"
          },
          {

            "iconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/order_nor.png",
            "selectedIconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/order.png",
            "text": "处理订单"
          },

          {

            "iconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/allOrder_nor.png",
            "selectedIconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/allOrder.png",
            "text": "所有订单"
          },
          {

            "iconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/myinfo_nor.png",
            "selectedIconPath": "https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/myinfo.png",
            "text": "个人中心"
          }
        ],


        imgUrl: '',
        productData: [],
        queryParams: {
          "modulesId": '', //模块id
          "mallProductName": '', //商品名称
          "pageNum": 1, //页数
          "pageSize": 200 //每页数量
        },
        propStyles: {
          // scan: true
          iconSrc: 'add',
          zhanweiColor: '#FFFFFF',
          txtColor: '#333333',
          bgColor: '#FFFFFF',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
        packageList: [], // 套餐列表
        orderListIng: [],// 处理中订单
        totalCountOrderIng: 0,
        orderListAll: [],// 所有订单
        totalCountOrderAll: 0,
        _index: '',
        _title: '',

      };
    },

    methods: {
      jumpUrl(url) {
        uni.navigateTo({
          url: `${url}`
        })
      },
      getServices(str) {
        let rtn = '';
        try {
          if (str && str != '') {
            let obj = JSON.parse(str);
            if (obj.services) {
              obj.services.forEach(v => {
                rtn += v.name + " "
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
        return rtn;
      },
      getBuy(str) {
        let rtn = '';
        if (str) {
          let obj = JSON.parse(str);
          rtn = obj.currentBuy.name;
        }
        return rtn;
      },
      //  orderUpdate
      dialogConfirmOrder() {
        this.orderUpdate(this.orderDetail.id, 1);
      },
      openDialog(index, item) {
        if (index == 'jieDan') {
          this._title = "接单";
        }
        this.$refs.alertConfirmOrder.open()
        this.orderDetail = item;

      },
      returnPage() {
        if (this.selectedIndex == '1-1') {
          this.selectedIndex = '1'
          this.title = '我的订单（厨师端）';
        } else if (this.selectedIndex == '1-2') {
          this.selectedIndex = '1-1'
          this.title = '到达签到';
        }
      },
      changeItem(index) {
        this.selectedIndex = index;
        if (index == 0) {
          this.title = '我的套餐（厨师端）';
          this.packageList = [];
          this.getPackageList();
        } else if (index == 1) {
          this.title = '我的订单（厨师端）';
          this.orderListIng = [];
          this.getOrderListIng();
        } else if (index == 2) {
          this.title = '所有订单（厨师端）';
          this.orderListAll = [];
          this.getOrderListAll();
        } else if (index == 3) {
          this.title = '个人中心';
        } else if (index == '1-1') {
          this.title = '到达签到';
        } else if (index == '1-2') {
          this.title = '出发';
        }

        console.log('this.selectedIndex~~', this.selectedIndex);
      },
      getNumbers(context) {
        if (context) {
          let list = JSON.parse(context);
          return list.length;
        }
      },
      formatTimestamp(timestamp) {
        console.log("->timestamp:" + timestamp);
        // 创建一个 Date 对象
        const date = new Date(timestamp * 1000);

        // 提取年、月、日、小时、分、秒
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
        const day = String(date.getDate()).padStart(2, '0'); // 补零
        const hours = String(date.getHours()).padStart(2, '0'); // 补零
        const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
        const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零

        // 格式化输出
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      showTip() {
        this.showAbsoluteBox = true;
        setTimeout(() => {
          this.showAbsoluteBox = false;
        }, 3000)
      },
      showPopup() {
        this.$refs.alertDialog.open()
      },
      handleClick(item) {
        if (item.title == '我的资料') {
          uni.navigateTo({
            url: `/page_registerCook/registerCook`,
          })
        } else if (item.title == '厨娘须知') {
          uni.navigateTo({
            url: `/page_notice/notice`,
          })
        }
      },
      addMenu() {
        uni.navigateTo({
          url: `/page_cookSide/addMenu`,
        })
      },
      getPackageList() { //
        let params = {
          cook_id: app.globalData.user.cook_info.id,
          page: 1,
          limit: 100,
        };
        let that = this;
        util.request(api.packageList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              that.packageList = res.data.data;
            }
          }).catch((err) => {
            console.log('err', err)
          });
      },
      // 
      dialogToggle(item) {
        this.orderDetail = item;
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        console.log('点击确认')
        // cookPackageDelete
        let that = this;
        let formData = {
          'id': that.orderDetail.id
        };
        util.request(api.cookPackageDelete, formData
          , 'POST', 'application/x-www-form-urlencoded').then(res => {
            if (res.code == 200) {
              that.packageList = [];
              that.getPackageList();
            }
          }).catch((err) => {
            console.log('err', err)
          });
      },
      dialogClose() {
        console.log('点击关闭')
      },
      //
      editMenu(item) {
        uni.navigateTo({
          url: '/page_cookSide/addMenu?id=' + item.id,
        })
      },
      // 订单列表
      getOrderListIng() {
        let params = {
          status: 0,
          page: 1,
          limit: 100,
        };

        let that = this;
        util.request(api.orderList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.orderListIng = this.orderListIng.concat(res.data.data);
              this.totalCountOrderIng = res.data.total;
            }
          }).catch((err) => {
            console.log('err', err)

          });
      },
      // 订单列表
      getOrderListAll() {
        let params = {
          status: 0,
          page: 1,
          limit: 100,
        };

        let that = this;
        util.request(api.orderList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.orderListAll = this.orderListAll.concat(res.data.data);
              this.totalCountOrderIng = res.data.total;
            }
          }).catch((err) => {
            console.log('err', err)

          });
      },
      // 更新状态
      orderUpdate(id, state) {
        let formData = {
          'shippingstate': state,
          'id': id,
        };
        let that = this;
        util.request(api.orderUpdate, formData
          , 'POST', 'application/x-www-form-urlencoded').then(res => {
            if (res.code == 200) {
              that.orderListIng = [];
              that.orderListAll = [];
              that.getOrderListIng();
              that.getOrderListAll();
              if (that._index == 'jieDan') {
                util.toast('接单成功')
              }
            }
          }).catch((err) => {
            console.log('err', err)
            reject(err);
          });
      }
    },

    mounted() {
    },
    created() {
      //获取手机系统信息
      const info = uni.getSystemInfoSync();
      //设置状态栏高度
      this.statusBarHeight = info.statusBarHeight;

      this.screenHeight = info.screenHeight;
      this.windowWidth = info.windowWidth;
      // h5 app mp-alipay没有胶囊按钮
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      // 获取胶囊的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
      this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
        .statusBarHeight)
      this.windowWidth = menuButtonInfo.left
      // #endif
    },
    onLoad: function (option) {

      this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'
      if (this.selectedIndex == 0) {
        this.getPackageList();
      } else if (this.selectedIndex == 1) {
        this.getOrderListIng();
      } else if (this.selectedIndex == 2) {
        this.getOrderListAll();
      }

    },
    onUnload() {

    },
    onShow: function () {
      uni.hideTabBar()

    },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background-color: #F8F8F8 !important;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #F8F8F8 !important;
  }

  .container {

    /* height: 100%;
    width: 100%; */
    .navigationBar {
      position: absolute;
      width: 750rpx;

      .navbar-content {
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        padding-left: 30rpx;
        display: flex;
        align-items: center;

        .iconB {
          width: 17rpx;
          height: 28rpx;
          z-index: 999;
          margin-right: 20rpx;
        }
      }
    }

  }

  .contentBox {
    /* display: flex;
    padding: 0rpx 30rpx;
    align-items: center;
    flex-direction: column; */
    width: 750rpx;

    .topPart {
      width: 750rpx;
      height: 448rpx;
      background: linear-gradient(180deg, #FECF01 0%, rgba(254, 207, 1, 0) 98%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding-top: 194rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      display: flex;

      .photo {
        width: 174rpx;
        height: 172rpx;
        margin-right: 26rpx;
        margin-top: 28rpx;
      }

      .center {
        .line1 {
          display: flex;
          margin-bottom: 38rpx;
          margin-top: 44rpx;

          .name {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 36rpx;
            color: #333333;
            margin-right: 22rpx;
            white-space: nowrap;
          }

          .status {
            width: 116rpx;
            height: 48rpx;
            line-height: 48rpx;
            background: #E14614;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: center;
            margin-right: 22rpx;
          }

          .button {
            width: 104rpx;
            height: 60rpx;
          }
        }

        .line2 {
          display: flex;

          .telIcon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 22rpx;
          }

          .tel {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .set {
          width: 48rpx;
          height: 48rpx;
        }

        .cookStatus {
          width: 156rpx;
          height: 54rpx;
          background: rgba(225, 70, 20, 0.1);
          border-radius: 536rpx 536rpx 536rpx 536rpx;

          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 24rpx;
          color: #E14614;
          margin-top: 52rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .attention {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }


    }

    .topPart0 {
      width: 750rpx;
      height: 448rpx;
      background: linear-gradient(180deg, #FECF01 0%, rgba(254, 207, 1, 0) 98%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding-top: 178rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;

      .attention {
        width: 692rpx;
        height: 68rpx;
        background: #FFFFFF;
        border-radius: 320rpx 320rpx 320rpx 320rpx;
        opacity: 0.8;
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;

        image {
          width: 44rpx;
          height: 44rpx;
          margin-left: 28rpx;
          margin-right: 46rpx;
        }

        span {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 28rpx;
          color: #E14614;
        }
      }

      .setMenu {
        width: 694rpx;
        height: 402rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 0rpx 0rpx;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        position: relative;

        .setPic {
          width: 690rpx;
          height: 402rpx;
          border-radius: 16rpx 16rpx 0rpx 0rpx;
        }

        .mask {
          position: absolute;
          left: 0rpx;
          width: 694rpx;
          height: 402rpx;
          background: rgba(0, 0, 0, 0.6);
          top: 0rpx;
          border-radius: 16rpx 16rpx 0rpx 0rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .examine {
            width: 290rpx;
            height: 92rpx;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 46rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 36rpx;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .labelBox {
          width: 140rpx;
          height: 140rpx;
          position: absolute;
          right: 0rpx;
          top: 0rpx;

          .triangle {
            width: 140rpx;
            height: 140rpx;
            position: absolute
          }

          .text {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            position: absolute;
            transform: rotate(45deg);
            right: 0rpx;
            top: 30rpx;
          }
        }
      }

      .bottom {
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);

        .setInfo {
          width: 694rpx;
          height: 270rpx;
          background: #FFFFFF;
          border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
          padding: 28rpx;

          .line1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .left {
              display: flex;
              align-items: center;

              .name {
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                font-size: 36rpx;
                color: #333333;
              }

              .person {
                margin-left: 32rpx;
                width: 96rpx;
                height: 32rpx;
                line-height: 32rpx;
                background: #F9F5E6;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: #D93F11;
                text-align: center;
              }
            }

            .right {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 24rpx;
              color: rgba(51, 51, 51, 0.6);
            }
          }

          .line2 {
            margin-bottom: 20rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 0.6);
            line-height: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .line3 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 24rpx;
              color: rgba(51, 51, 51, 0.5);
            }

            .right {
              font-family: OPPOSans, OPPOSans;
              font-weight: 700;
              font-size: 36rpx;
              color: #D93F11;

              span {
                font-weight: 500;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.50)
              }
            }
          }
        }

        .buttons {
          width: 694rpx;
          height: 118rpx;
          background: #FFFFFF;
          border-radius: 0rpx 0rpx 16rpx 16rpx;
          padding: 0rpx 28rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: #9E9E9E;
          }

          .right {
            display: flex;
            align-items: center;

            .delete,
            .edit {
              width: 138rpx;
              height: 56rpx;
              line-height: 56rpx;
              text-align: center;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 24rpx;
              color: #333333;
            }

            .delete {
              background-color: rgba(51, 51, 51, 0.1);
              margin-right: 14rpx;
            }

            .edit {
              background-color: rgba(254, 207, 1, 1);
            }
          }
        }
      }

      .iconBox {
        width: 340rpx;
        height: 110rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
        padding-left: 70rpx;
        border-radius: 0rpx 55rpx 55rpx 0rpx;

        position: fixed;
        left: 83rpx;
        bottom: 243rpx;
        display: flex;

        .eachIconbox {
          margin-right: 44rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100%;
          padding-top: 10rpx;

          image {
            width: 44rpx;
            height: 44rpx;
            margin-bottom: 10rpx;
          }

          .text {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }



      }

      .Operations {
        position: fixed;
        left: 14rpx;
        bottom: 220rpx;
        z-index: 999;

        .addIcon {
          width: 144rpx;
          height: 142rpx;

        }


      }

    }

    .topPart1 {
      width: 750rpx;
      height: 448rpx;
      background: linear-gradient(180deg, #FECF01 0%, rgba(254, 207, 1, 0) 98%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding-top: 178rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;

      .searchBox {
        width: 690rpx;
        height: 92rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 364rpx 364rpx 364rpx 364rpx;
        margin-bottom: 20rpx;
      }

      .eachMenu {
        width: 690rpx;
        height: 632rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 0rpx 46rpx;
        margin-bottom: 20rpx;

        .orderNum {
          width: 100%;
          height: 110rpx;
          line-height: 110rpx;
          border-radius: 20rpx 20rpx 0rpx 0rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
          border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
          display: flex;
          justify-content: space-between;

          span {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 28rpx;
            color: #D93F11;
          }
        }

        .orderInfo {
          padding: 20rpx 0rpx;
          position: relative;

          .infoLine {
            display: flex;
            margin-bottom: 24rpx;

            .left {
              font-weight: 400;
              font-size: 28rpx;
              color: rgba(51, 51, 51, 0.8);
              margin-right: 20rpx;
            }

            .right {
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
            }

            .red {
              color: #D93F11;
            }
          }

          .addrIcon {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 0rpx;
            top: 26rpx;
          }
        }
      }



      .buttons {
        width: 100%;
        height: 116rpx;
        background: #FFFFFF;
        border-radius: 0rpx 0rpx 16rpx 16rpx;
        border-top: 2rpx solid rgba(51, 51, 51, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 24rpx;
          color: #9E9E9E;
        }

        .right {
          width: 162rpx;
          height: 66rpx;

          line-height: 66rpx;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          text-align: center;

        }

        .grey {

          background-color: rgba(51, 51, 51, 0.1);

        }

        .yellow {

          background: #FECF01;
        }
      }

      .zhanwei {
        width: 100%;
        height: 162rpx;
      }

      .nodata {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 374rpx;
          height: 340rpx;
          margin-top: 170rpx;
          margin-bottom: 60rpx;
        }

        .text {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 32rpx;
          color: rgba(51, 51, 51, 0.6);
        }
      }

      .statics {
        display: flex;
        margin-bottom: 25rpx;
        margin-top: 64rpx;

        .left {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }

        .center {
          font-family: OPPOSans, OPPOSans;
          font-weight: 700;
          font-size: 72rpx;
          color: #D93F11;
          line-height: 50rpx;
          margin: 0rpx 46rpx;
          border-bottom: 8rpx solid #D93F11;
          height: 76rpx;

        }

        .right {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 36rpx;
          color: #333333;
        }
      }

      .topBox {
        padding: 24rpx 36rpx;
        width: 690rpx;
        height: 190rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
      }

      .centerBox {
        padding: 24rpx 36rpx;
        width: 690rpx;
        height: 322rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
      }

      .bottomBox {
        padding: 0rpx 46rpx;
        width: 690rpx;
        height: 216rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .line1 {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 32rpx;
          color: rgba(51, 51, 51, 0.8);
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
        }

        .line2 {
          display: flex;
          padding-top: 24rpx;

          .type {
            margin-right: 32rpx;
            width: 178rpx;
            height: 62rpx;
            line-height: 62rpx;
            text-align: center;
            background: rgba(254, 207, 1, 0.3);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 32rpx;
            color: #333333;
          }
        }
      }

      .button {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 46rpx;

        view {
          width: 644rpx;
          height: 98rpx;
          line-height: 98rpx;

          border-radius: 20rpx 20rpx 20rpx 20rpx;
          text-align: center;
        }

        .grey {
          font-family: Inter, Inter;
          font-weight: 600;
          font-size: 32rpx;
          color: rgba(51, 51, 51, 0.6);
          background: #E6E5E0;
        }

        .yellow {
          background: #FECF01;
        }
      }

      .row {
        width: 100%;
        height: 72rpx;
        display: flex;
        align-items: center;

        position: relative;

        .left {
          width: 140rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(51, 51, 51, 0.8);
        }

        .right {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .addrIcon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          bottom: 16rpx;
          right: 0rpx;
        }

        .telIcon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          top: 16rpx;
          right: 0rpx;
        }

        .statusTxt {
          position: absolute;
          bottom: 16rpx;
          right: 0rpx;
          width: 118rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
          background: rgba(217, 63, 17, 0.1);
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 28rpx;
          color: #D93F11;
        }

      }

      .borderB {
        border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
      }


    }

    .topPart2 {

      display: flex;
      flex-direction: column;

      .mapBox {
        width: 750rpx;
        flex: 1;
      }

      .addrInfo {
        width: 750rpx;
        height: 706rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 64rpx 30rpx;

        .line1 {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 36rpx;
          color: #333333;
          margin-bottom: 114rpx;

          span {
            font-weight: 700;
            font-size: 72rpx;
            color: rgba(93, 137, 255, 1);

          }
        }

        .infoLine {
          display: flex;
          margin-bottom: 40rpx;

          .timeIcon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 34rpx;
          }

          .key {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 0.8);
            width: 140rpx;
            margin-right: 20rpx;
          }

          .value {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            width: 434rpx;
          }

          .circle {
            width: 20rpx;
            height: 20rpx;
            border-radius: 10rpx;
            margin-left: 14rpx;
            margin-right: 40rpx;
            margin-top: 10rpx;
          }

          .red {
            background: #D93F11;
          }

          .green {
            background: #4CAD73;
          }
        }

        .button {
          width: 100%;
          display: flex;
          justify-content: center;

          .yellow {
            width: 644rpx;
            height: 98rpx;
            line-height: 98rpx;
            background: #FECF01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-family: Inter, Inter;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            text-align: center;
          }
        }

      }

    }

    .bgNone {
      background: none;
    }

    .centerPart {
      width: 750rpx;
      height: 332rpx;
      display: flex;
      justify-content: center;

      .centerBox {
        width: 682rpx;
        height: 332rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 0rpx 26rpx;
        padding-top: 32rpx;

        .top {
          display: flex;
          justify-content: space-between;

          .left {
            .line1 {
              display: flex;

              .text {
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
              }

              .eye {
                width: 32rpx;
                height: 34rpx;
                margin-left: 22rpx;
              }
            }

            .line2 {
              margin-top: 16rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 48rpx;
              color: #333333;
            }
          }

          .right {
            width: 124rpx;
            height: 54rpx;
            line-height: 54rpx;
            text-align: center;
            background: linear-gradient(270deg, #FECF01 0%, #FFEA8E 100%);
            border-radius: 294rpx 294rpx 294rpx 294rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            margin-top: 58rpx;
          }
        }

        .bottom {
          width: 628rpx;
          height: 132rpx;
          background: rgba(254, 207, 1, 0.05);
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          margin-top: 38rpx;
          padding: 30rpx 22rpx;
          display: flex;
          justify-content: space-between;

          .eachBox {
            .title {
              text-align: center;
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(51, 51, 51, 0.6);
              line-height: 32rpx;
            }

            .num {
              text-align: center;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 24rpx;
              color: #333333;
              margin-top: 10rpx;
            }

          }
        }


      }

    }

    .bottomPart {
      width: 750rpx;
      height: 332rpx;
      display: flex;
      justify-content: center;
      margin-top: 20rpx;

      .bottomBox {
        width: 682rpx;
        height: 332rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        display: flex;
        flex-wrap: wrap;
        padding: 22rpx 0rpx;

        .iconBox {
          width: 33%;
          height: 126rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .icon {
            width: 72rpx;
            height: 72rpx;
            margin-bottom: 22rpx;
          }
        }
      }

    }

    .depositPart {
      width: 750rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      margin-top: 20rpx;

      .depositBox {
        width: 682rpx;
        height: 100rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        display: flex;
        align-items: center;
        position: relative;

        .depositIcon {
          width: 48rpx;
          height: 48rpx;
          margin-left: 54rpx;
        }

        .text1 {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 32rpx;
          color: rgba(51, 51, 51, 0.8);
          margin-left: 32rpx;
          margin-right: 108rpx;
        }

        .text2 {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 32rpx;
          color: #E14614;


        }

        .attention {
          width: 40rpx;
          height: 40rpx;
          margin-left: 34rpx;
        }

        .absoluteBox {
          left: 24rpx;
          top: -68rpx;
          position: absolute;
          width: 634rpx;
          height: 100rpx;
          background: rgba(177, 176, 176, 0.6);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 24rpx;
          color: #E14614;
          display: flex;
          align-items: center;
          padding-left: 12rpx;

          .attention {
            margin-right: 10rpx;
          }
        }
      }
    }






  }

  /deep/ .uni-button-color {
    color: #333 !important;
  }

  /deep/ .uni-dialog-button-text {
    color: rgba(51, 51, 51, 0.6)
  }

  .zhanwei {
    width: 750rpx;
    height: 170rpx;
    /* background: #F4F4F2; */
  }

  .tabBarContainer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 750rpx;
    height: 162rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -8rpx 10rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    display: flex;
    justify-content: space-around;

    .barBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100rpx;

      .text {
        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        font-size: 20rpx;
        color: #333333;
        opacity: 0.6;
      }

      .selectedTxt {
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;
        opacity: 1;
      }



      .iconStyle {
        width: 54rpx;
        height: 54rpx;
        margin-bottom: 20rpx;
      }

      .selectedIconStyle {
        width: 54rpx;
        height: 54rpx;
        margin-bottom: 20rpx;
      }

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #ABABAB;
      }

      .selectedTtitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #343434;
      }
    }

  }

  .popUpCoupon {
    .popBox {
      display: flex;
      justify-content: center;
      align-content: center;

      image {
        /* width: 350rpx;
        height: 369rpx; */
        width: 595rpx;
        height: 627.3rpx;
      }

      .couponImg {
        width: 698rpx;
        height: 736rpx;
        background-position: center;
        background-size: cover;
      }

      .h1,
      .h3,
      .h4,
      .h5 {
        text-align: center;
        width: 100%;
      }

      .h1 {
        margin-top: 237rpx;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #E38F5A;

      }

      .h2 {
        display: flex;
        margin-top: 60rpx;
        justify-content: center;
        align-items: baseline;

        .icon {
          font-weight: 600;
          font-size: 50rpx;
          color: #FDCA9F;

        }

        .num {
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 90rpx;
          color: #FDCA9F;
          line-height: 27rpx;

        }
      }

      .h3 {
        margin-top: 60rpx;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 7rpx;
      }

      .h4 {
        margin-top: 30rpx;
      }

      .h5 {
        margin-top: 10rpx;
      }

      .h4,
      .h5 {
        font-weight: 400;
        font-size: 22rpx;
        color: #FFFFFF;
      }

      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .btn {
          width: 342rpx;
          height: 66rpx;
        }
      }


    }

    .closeBox {
      width: 626rpx;
      height: 75rpx;

      .closeBtn {
        position: absolute;
        top: 90rpx;
        right: 20rpx;
        width: 40rpx;
        height: 40rpx;

      }
    }


    .saveBtnBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 66rpx;
    }

    .saveBtn {
      width: 620rpx;
      height: 88rpx;
      background: #84240E;
      border-radius: 10rpx;
      font-size: 36rpx;
      font-family: SourceHanSerifCN-Heavy, SourceHanSerifCN;
      font-weight: 800;
      color: #FAF3DB;
      line-height: 88rpx;
      letter-spacing: 6px;
      text-align: center;
    }

  }

  /deep/ .uni-easyinput {
    height: 100%;
  }

  /deep/ .uni-easyinput__content {
    height: 100%;
  }

  /deep/ .is-input-border {
    border-radius: 60rpx;
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  /deep/ .uni-easyinput__placeholder-class {
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
  }

  /deep/ .uniui-search {
    color: #333333 !important;
  }
</style>